<template>
  <div class="filter">
    <div class="filter-content" :class="{multi: isMultiConditions}">
      <el-switch v-if="isMultiConditions"
                 class="switch"
                 v-model="rules.relationType"
                 active-text="且"
                 :active-value="2"
                 inactive-text="或"
                 :inactive-value="1"
                 active-color="#39c6cd"
                 inactive-color="#ff9c4b">
      </el-switch>
      <div class="conditions">
        <div class="condition" v-for="(condition, index) in rules.conditions">
          <el-select class="selector1" v-model="condition.name" @change="handleChangeSelect1(condition)">
            <el-option v-for="item in topLevelConditions"
                       :label="item.name"
                       :value="item.fieldName"
                       :key="item.id">
            </el-option>
          </el-select>
          <el-select class="selector1" v-if="condition.conType == 2" v-model="condition.content">
            <el-option v-for="item in conditions.subLevel"
                       :label="item.name"
                       :value="item.enumStr"
                       :key="item.id">
            </el-option>
          </el-select>
          <el-input class="search-input" v-if="condition.conType == 1" placeholder="输入关键字搜索" v-model="condition.content"></el-input>
          <i v-if="index > 0" class="remove-condition"
             :class="{'el-icon-circle-close':closeHoverIndex !== index, 'el-icon-error': closeHoverIndex === index}"
             @click="removeCondition(index)"
             @mouseenter="mouseenter(index)"
             @mouseout="closeHoverIndex = -1">
          </i>
        </div>
      </div>
    </div>
    <el-button type="text" @click="addCondition">新加一组条件</el-button>
  </div>
</template>
<script>

  import {mapState, mapGetters} from 'vuex'

  export default {
    props: {
      conditions: {
        type: Object,
        default: () => ({
          topLevel: [],
          subLevel: []
        })
      }
    },
    data() {
      return {
        rules: {
          relationType: 2,
          conditions: [{
            content: '',
            fieldName: '',
            name: '',
            conType: 1
          }]
        },
        closeHoverIndex: -1
      }
    },
    computed: {
      ...mapState({
        platformType: state => state.disparageManage.platformType,
        ctype: state => state.disparageManage.ctype,
        // userType: state => state.disparageManage.userType,
        // disparageType: state => state.disparageManage.disparageType,
      }),
      ...mapGetters([
        'userType',
        'disparageType'
      ]),
      topLevelConditions() {
        return this.conditions.topLevel.filter(item => item.name !== '状态')
      },
      isMultiConditions() {
        return this.rules.conditions.length > 1;
      }
    },
    created() {

    },
    methods: {
      // 鼠标移入放大删除按钮
      mouseenter(index) {
        this.closeHoverIndex = index;
      },
      // 添加一组新搜索条件
      addCondition() {
        this.rules.conditions.push({
          content: '',
          name: '',
          fieldName: '',
          conType: 1
        });
      },
      // 删除一组搜索条件
      removeCondition(index) {
        this.rules.conditions.splice(index, 1);
      },
      // 移除所有搜索条件
      clearCondition() {
        let n = this.rules.conditions.length;
        this.rules.conditions.splice(0, n);
        this.addCondition();
        this.rules.relationType = 2
      },
      // 第一个选择器onChange
      handleChangeSelect1(condition) {
        let obj = this.topLevelConditions.filter(item => item.fieldName == condition.name)[0];
        condition.conType = obj.conType;
        condition.content = '';
        condition.conType == 2 && this.$emit('topLevelChange', obj.id);
      }
    }
  }
</script>
<style lang="scss" scoped>

  .filter-content {
    position: relative;
    box-sizing: border-box;
    padding: 30px 15px 30px 15px;
    background-color: #f8f8f8;
  }

  .filter-content.multi {
    $switchLineColor: #ddd;
    padding: 30px 15px 30px 115px;
    &:before {
      content: '';
      display: block;
      position: absolute;
      top: 50px;
      left: 59px;
      width: 1px;
      height: calc(100% - 100px);
      background-color: $switchLineColor;
    }
    .conditions {
      position: relative;
      &:before,
      &:after {
        content: "";
        display: block;
        position: absolute;
        left: -56px;
        width: 56px;
        height: 1px;
        background-color: $switchLineColor;
      }
      &:before {
        top: 20px;
      }
      &:after {
        bottom: 20px;
      }
    }
  }

  .switch {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
  }

  .condition {
    position: relative;
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    .remove-condition {
      line-height: 40px;
      vertical-align: top;
      cursor: pointer;
      font-size: 16px;
      color: #ff4545;
    }
  }

</style>
